import React,{memo, useState,useEffect} from 'react'
import { useLocation } from 'react-router-dom';
import { UserOutlined ,DownOutlined} from '@ant-design/icons';
import "../../assets/Layout/tongzhi.scss";
import { Avatar,Dropdown } from 'antd';
import type { MenuProps } from 'antd';

const items: any[] = [
  {
    label: '拒绝',
    key: '1',
  },
];

function TongzhiList(){
  const [state,setState] = useState();
  let location = useLocation();
  useEffect(()=>{
    let {state} = location
    setState(state);
  })

  return <>
    <div className="tongzhi-title">
      <p>{state === 1?'好友通知':'群通知'}</p>
      <div>
        <i className="iconfont mt-guolvqi"></i>
        <i className="iconfont mt-lajixiang"></i>
      </div>
    </div>
    <div className="tongzhi-mian">
         <div className="tongzhi-item">
           <div className="tongzhi-item-l">
             <div>
               <Avatar size={45} icon={<UserOutlined />} />
             </div>
             <div className="tongzhi-l-top">
               <p><span>用户名称</span>
                 <span>请求加为好友</span>
                 <span>2024/02/01 10:00:11</span>
               </p>
               <div className="tongzhi-l-bt">
                 留言：你好我是xxx
               </div>
             </div>

           </div>
           <div className="tongzhi-item-r">
             <Dropdown.Button
               icon={<DownOutlined />}
               size={'small'}
               menu={{ items }}
             >
             同意
             </Dropdown.Button>
           </div>
         </div>
    </div>

  </>
}

export default memo(TongzhiList);

